<!-- 出栏死淘统计 -->
<template>
	<card :cardHeight="cardHeight" cardTitle="新增用信金额" noMore><Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart></card>
</template>

<script>
import echarts from 'echarts';
import StatisticsMixins from '../StatisticsMixins';
function priceWan(num) {
	return (Math.floor(num / 100) * 100) / 10000;
}
import { priceFormat } from '@/utils/base';
import { mortgageapi } from '@/api/index.js';
export default {
	name: 'lineChart',
	mixins: [StatisticsMixins],
	data() {
		return {
			option_column: {
				// 自定义显示内容
				tooltip: {
					trigger: 'axis',
					formatter: function (params) {
						let result = '';
						params.forEach(function (item) {
							let dotHtml = '<span style="display:inline-block;border-radius:10px;height:30px;"></span>';
							result += `<span style="font-size: 12px; font-weight: 400; color: #7E848A;">新增用信金额</span>: <span style="font-size: 16px; font-weight: bold; color: #06706C;">${priceFormat(
								item.data,
								2
							)}</span>万`;
						});
						return result;
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: ['第一季度', '第二季度', '第三季度', '第四季度'],
					nameTextStyle: {
						fontSize: 12,
						fontWeight: 800,
						color: '#7E848A'
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					name: '单位 (万元)',
					type: 'value',
					nameTextStyle: {
						fontSize: 14,
						fontWeight: 800
					}
				},

				series: [
					{
						data: [],
						type: 'line',
						symbol: 'circle', // 折线点设置为实心点
						symbolSize: 7, // 折线点大小
						itemStyle: {
							normal: {
								color: '#28BEB4' // 折线点的颜色
							}
						},
						lineStyle: {
							color: '#28BEB4' // 折线的颜色
						},
						label: {
							show: true,
							offset: [0, -10],
							position: 'top',
							formatter: param => {
								return (param.value > 1e4 ? priceWan(param.value) : param.value) + (param.value > 1e4 ? '万' : '');
							}
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#28BEB4' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#fff' // 100% 处的颜色
									}
								],
								global: false
							}
						}
					}
				]
			}
		};
	},
	methods: {
		getInfo() {
			console.log('initecharts', this.globalOrgId);
			this.$postAction(mortgageapi.echartsUrl.getline + '?orgId=' + this.globalOrgId).then(da => {
				if (da.code == 1) {
					let info = da.data;
					let title = [];
					let data = [];
					for (let i = 0; i < info.length; i++) {
						let sub = info[i].quarter.split('-');
						title.push(sub[0] + '年' + sub[1] + '季度');
						data.push(info[i].addUseCost);
					}
					let option_column = { ...this.option_column };
					option_column.xAxis.data = [...title];
					option_column.series[0].data = [...data];
					this.option_column = { ...option_column };
					console.log('option_column', option_column);
				}
			});
		}
	}
};
</script>
